<template>
    <div class="chugui">
        <div class="title">
            <h1><img src="@/assets/index/n-title.png" alt=""></h1>
            <router-link to="/newslist">查看更多></router-link>
        </div>
        <div class="body">
            <router-link to="/newslist"
            class="news-item"
            v-for="item of this.list"
            :key="item.id"
            >
                <div class="img-box">
                    <img :src="item.url" alt="">
                </div>
                <div class="word">
                    <h1 class="item-h1">{{item.first_title}}</h1>
                    <p class="item-time">{{item.create_time}}</p>
                    <p class="center">{{item.second_title}}</p>
                </div>
            </router-link>

        </div>
           
    </div>
</template>

<script>
import axios from 'axios'
import { mapState } from 'vuex'
let tabs=[
            {"tab":"现代简约风格","show":true,"title":"1111"},
            {"tab":"新中式风格","show":false,"title":"2222"},
            {"tab":"欧式风格","show":false,"title":"3333"},
            {"tab":"美式风格","show":false,"title":"3333"}
        ];
export default {
    name: 'chugui',
    data () {
        return {
            username:"",
            phone:"",
            message:'嘉宝官网移动端首页报名',
            description:'嘉宝官网移动端首页报名',
            local:'嘉宝官网移动端首页报名',
            tabs:tabs,
            list:[],
            categoryName:'橱柜',
            data:[],
            total:0
        }
    },
    computed:{
        ...mapState(['baseUrl'])
    },
    mounted(){
        this.getInfo()
    },
    methods:{
          getInfo(){
      // console.log(this.baseUrl)
      axios.get(this.baseUrl+'cms/news/to_index_news',
               )
      .then(this.getInfoSucc)
    },
    getInfoSucc(response){
    //   console.log(response)
      this.list = response.data.data
        for(var i =0;i<this.list.length;i++){
            if(this.list[i].img_url!=null){
                this.url = this.list[i].img_url.url
                // console.log(this.url)
                this.list[i]['url'] = this.url
                let time = this.list[i].create_time.split(" ")[0];
                
                let day = time.substring(5);
                 
                let years =  time.substring(0,4);
                this.list[i]['day'] =  day 
                this.list[i]['years'] =  years
                
            }
                
        }
    // console.log(this.list)
    }

    },
}
</script>


<style lang="stylus" scoped>
// 1rem = html font-size = 50px

@import "~@styles/varibles.styl";
@import "~@styles/mixins.styl";
.chugui 
    background white
    margin-top 0.2rem
    overflow hidden
img 
    width 100%
.title 
    title()
.title>h1
    title_h1()
.title>a
    title_a()
.body 
    
   chugui_body()
   margin-top 0.2rem
.news-item 
    display block
    overflow hidden
.img-box 
    width 3.8rem 
    height 2.26rem
    float left
    // background black
    margin-right 0.2rem
.word 
    float right
    width 2.8rem
.news-item 
    margin-bottom 0.2rem
.item-h1 
    font-size 0.28rem
.item-time 
    color #666666
    font-size 0.24rem
    margin 0.27rem 0
.center 
    font-size 0.2rem
    line-height 0.26rem
    color #666666
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
</style>
